<!-- 使用说明：
<search @searchVal="getSearchVal" placeholder="请输入门店名称"></search>

import search from '@/components/baseComponents/search/index.vue';
export default {
	components: { search },
	data() {
		return {
			inputVal: ''
		};
	},
	methods: {
		getSearchVal(e) {
			this.inputVal = e;
		}
	}
}; -->

<template>
  <view class="box">
    <view class="lef">
      <view class="iconfont icon-sousuo1"></view>
      <view class="input"
        ><input v-model="value" :placeholder="placeholder" @blur="subVal"/>
      </view>
    </view>
    <view class="rig">
      <view class="line">|</view>
      <view class="btn" @click="subVal">搜索</view>
    </view>
  </view>
</template>

<script>
export default {
  props: ["placeholder"],
  data() {
    return {
      value: "",
    };
  },
  methods: {
    subVal() {
      this.$emit("searchVal", this.value);
    },
  },
};
</script>

<style lang="scss" scoped>
.box {
  width: 702rpx;
  height: 80rpx;
  border: 1rpx solid #e0e0e0;
  border-radius: 8rpx;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  .lef {
    display: flex;
    flex: 4;
    justify-content: flex-start;
    align-items: center;
    font-size: 29rpx;
    font-weight: 500;
    color: #888888;
    .iconfont {
      margin: 0 14rpx;
    }
    .input {
      width: 100%;
    }
  }
  .rig {
    display: flex;
    flex: 1;
    align-items: center;
    font-weight: 500;
    .line {
      color: #888888;
      font-size: 29rpx;
      margin: 0 24rpx;
    }
    .btn {
      font-size: 29rpx;
      color: #ffb72f;
    }
  }
}
</style>
